<script setup lang="ts">
//
// 子调父
import type {PayProductsData} from "@/api/products/types";
import {ref} from "vue";
import {publicUrl} from "@/stores";

const emit = defineEmits<{
  (event: 'close'): void
}>()

const props = defineProps({
  goods: {
    type: Object as () => PayProductsData,
    required: true
  }
})

const quantity = ref(1)

// 修改购买事件参数传递
const onBuyNow = async () => {
  console.log(quantity.value)
  await uni.redirectTo({url: `/pagesOrder/create/create?skuId=${props.goods.id}&count=${quantity.value}`});
  emit('close');
};

</script>

<template>
  <view class="service-panel">
    <!-- 关闭按钮 -->
    <text class="close icon-close" @click="emit('close')"></text>
    <!-- 标题 -->
    <view class="title">{{ goods.name }}</view>
    <!-- 内容 -->
    <view class="content">
      <!-- 新增商品信息展示 -->
      <view class="product-info">
        <image :src="publicUrl+goods.photo" class="product-image"/>
<!--        <view class="info-text">-->
<!--          <text class="product-title">{{ goods.name }}</text>-->
<!--        </view>-->

      </view>
      <view class="info-text">
        <text class="price">¥{{ goods.price?.toFixed(2) }}</text>
      </view>
      <!--      &lt;!&ndash; 新增规格选择 &ndash;&gt;-->
      <!--      <view class="specs">-->
      <!--        <text>颜色:</text>-->
      <!--        <select v-model="selectedSpec" :options="goods.specs" />-->
      <!--      </view>-->
      <!-- 新增数量控制 -->
      <view class="quantity-control">
        <text>数量:</text>
        <uni-number-box :min="1" :max="goods.stockQuantity" v-model="quantity"/>
        <!--        <input type="number" v-model="quantity" min="1"/>-->
      </view>
      <!-- 新增购买按钮 -->
      <button @click="onBuyNow">立即购买</button>
    </view>
  </view>
</template>

<style lang="scss">
.service-panel {
  padding: 0 30rpx;
  border-radius: 10rpx 10rpx 0 0;
  position: relative;
  background-color: #fff;
}

.title {
  line-height: 1;
  padding: 40rpx 0;
  text-align: center;
  font-size: 32rpx;
  font-weight: normal;
  border-bottom: 1rpx solid #ddd;
  color: #444;
}

.close {
  position: absolute;
  right: 24rpx;
  top: 24rpx;
}

.content {
  padding: 20rpx 20rpx 100rpx 20rpx;

  .item {
    margin-top: 20rpx;
  }

  .dt {
    margin-bottom: 10rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    position: relative;

    &::before {
      content: '';
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      background-color: #eaeaea;
      transform: translateY(-50%);
      position: absolute;
      top: 50%;
      left: -20rpx;
    }
  }

  .dd {
    line-height: 1.6;
    font-size: 26rpx;
    color: #999;
  }

  // 新增商品信息样式
  .product-info {
    display: flex;
    align-items: center;
    //flex-direction: column;
    margin-bottom: 20rpx;

    .product-image {
      width: 200rpx;
      height: 200rpx;
      margin: 0rpx 40rpx 20rpx 0rpx;
    }

    .info-text {
      display: flex;
      flex-direction: column;

      .product-title {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 10rpx;
      }
    }
  }
  .price {
    color: #ff4500;
    font-size: 28rpx;
  }

  // 新增规格选择样式
  .specs {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    font-size: 28rpx;
  }

  // 新增数量控制样式
  .quantity-control {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    font-size: 28rpx;

    input {
      width: 150rpx;
      height: 60rpx;
      margin-left: 20rpx;
      border: 1rpx solid #ddd;
      padding: 0 10rpx;
    }
  }

  // 新增按钮样式
  button {
    margin-top: 30rpx;
    width: 100%;
    background-color: #ff4500;
    color: white;
    padding: 15rpx 0;
    border-radius: 8rpx;
    font-size: 30rpx;
  }
}
</style>
